<template>
	<div class="container padding-top-sm">
		<div class="senior-search">
			<div class="e-breadcrumb el-flex text-888 margin-left-sm text-xs">
			</div>
			<div class="group-search text-sm">
				<el-button type="primary" icon="el-icon-plus" @click="addBtn()">添加用户</el-button>
			</div>
		</div>
		<div class="tab">
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column prop="id" label="ID" width="180">
				</el-table-column>
				<el-table-column prop="user_name" label="账号">
				</el-table-column>
				<el-table-column prop="nick_name" label="真实姓名">
				</el-table-column>
				<el-table-column prop="group_name" label="权限组">
				</el-table-column>
				
				<el-table-column prop="status_label" label="状态">
					<template slot-scope="scope">
						<span class="text-red" v-if="scope.row.status==2">{{scope.row.status_label}}</span>
						<span class="text-blue" v-else>{{scope.row.status_label}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="login_time" label="最近登录时间">
				</el-table-column>
				<el-table-column prop="add_time" label="创建时间">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="300">
					<template slot-scope="scope">
						<span class="text-blue cp" @click="eventClick(scope.row)">修改</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination">
			<el-pagination layout="prev, pager, next" :page-size="tabPages.page_size" :total="total" background
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<el-dialog title="添加用户" :visible.sync="dialog.addDialog" width="40%">
			<div slot="title" class="dialog-header">添加用户</div>
			<div class="dialog-content-box">
				<el-form ref="addForm" :rules="rules" :model="addForm" label-width="100px">
					<el-form-item label="账号" prop="user_name">
						<el-input v-model="addForm.user_name"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名" prop="nick_name">
						<el-input v-model="addForm.nick_name"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="addForm.password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPass">
						<el-input type="password" v-model="addForm.checkPass"></el-input>
					</el-form-item>
					<el-form-item label="权限组" prop="group_id">
						<el-select v-model="addForm.group_id">
							<el-option v-for="op in group" :key="op.id" :label="op.name" :value="op.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.addDialog = false">关 闭</el-button>
				<el-button type="primary" @click="submitFormAdd('addForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改用户" :visible.sync="dialog.updateDialog" width="40%">
			<div slot="title" class="dialog-header">修改用户</div>
			<div class="dialog-content-box">
				<el-form ref="updateForm" :model="updateForm" label-width="100px">
					<el-form-item label="账号" prop="user_name">
						<el-input disabled v-model="updateForm.user_name"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名" prop="nick_name">
						<el-input v-model="updateForm.nick_name"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="updateForm.password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPass">
						<el-input type="password" v-model="updateForm.checkPass"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="status" >
						<el-radio-group v-model="updateForm.status" >
							<el-radio :label="1" :disabled="id==1">启用</el-radio>
							<el-radio :label="2"  :disabled="id==1">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="权限组" prop="group_id">
						<el-select v-model="updateForm.group_id">
							<el-option v-for="op in group" :key="op.id" :label="op.name" :value="op.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.updateDialog = false">关 闭</el-button>
				<el-button type="primary" @click="submitFormUpdate('updateForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getuserList,
		getGroup,
		addUser
	} from './index';
	export default {
		name: 'basetable',
		data() {
			var validatePass = (rule, value, callback) => {
				let reg = /^[0-9a-zA-Z]{4,30}$/
				if (!reg.test(value)) {
					return callback(new Error('密码长度为6-30位的数字和字母'));
				} else {
					callback()
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.addForm.password||value !== this.addForm.checkPass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				tableData: [],
				total: 0,
				tabPages: {
					page: 1,
					page_size: 17,
				},
				dialog: {
					addDialog: false,
					updateDialog: false,
				},
				group: [],
				addForm: {
					user_name: '',
					password: '',
					checkPass: '',
					nick_name: '',
					group_id: ''
				},
				updateForm: {
					user_name: '',
					password: '',
					checkPass: '',
					nick_name: '',
					group_id: '',
					status: 1, //1启用，2禁用
				},
				id: '',
				rules: {
					user_name: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 20,
							message: '长度在 3 到 20 个字符',
							trigger: 'blur'
						}
					],
					nick_name: [{
							required: true,
							message: '请输入真实姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 5,
							message: '长度在 2 到 5 个字符',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						validator: validatePass,
						min: 4,
						max: 20,
						message: '长度在 4 到 20 个字符',
						trigger: 'blur'
					}],
					checkPass: [{
						required: true,
						validator: validatePass2,
						min: 4,
						max: 20,
						message: '两次输入密码不一致',
						trigger: 'blur'
					}],
					group_id: [{
						required: true,
						message: '请选择权限组',
						trigger: 'change'
					}]
				}
			};
		},
		created() {
			this.getTab()
			this.getGroup()
		},
		methods: {
			addBtn(){
				this.dialog.addDialog=true;
				this.id='';
				this.addForm = this.$options.data().addForm
			},
			submitFormUpdate(formName) {
				if(this[formName].password != this[formName].checkPass){
					this.$message.error('两次输入密码不一致')
					return
				}
				let data = {}
				data.row = this.updateForm
				if (this.id != '') {
					data.id = this.id
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addUser(data).then(res => {
							this.getTab()
							this.dialog.updateDialog = false
							this.$message.success('操作成功');
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//修改用户
			eventClick(row) {
				this.id = row.id
				this.updateForm.user_name = row.user_name
				this.updateForm.password = row.password
				this.updateForm.nick_name = row.nick_name
				this.updateForm.group_id = row.group_id
				this.updateForm.status = row.status
				this.dialog.updateDialog = true
			},
			//添加用户
			submitFormAdd(formName) {
				let data = {}
				data.row = this.addForm
				if (this.id != '') {
					data.id = this.id
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addUser(data).then(res => {
							this.getTab()
							this.dialog.addDialog = false
							this.$message.success('操作成功');
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//列表
			getTab() {
				getuserList(this.tabPages).then(res => {
					this.tableData = res.data.list
					this.total = res.data.total
				});
			},
			getGroup() {
				getGroup().then(res => {
					this.group = res.data
				});
			},
			handleCurrentChange(val) {
				this.tabPages.page = val
				this.getTab()
			}
		},
	}
</script>

<style scoped lang="less">
	.dialog-content-box {
		padding: 0 10%;

		.el-form-item {
			margin-bottom: 20px !important;
		}
	}
</style>
